<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="JeapSik">
    <link rel="icon" href="img/favicon.ico" type="image/gif">
    <title>JeapSik-全场景工具集</title>
    <link rel="stylesheet" href="css/all.min.css">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            background-color: #f9f9f9;
        }

       .sidebar {
            width: 200px;
            background-color: #fff;
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
            transition: width 0.3s ease;
        }

       .sidebar.collapsed {
            width: 60px;
        }

       .sidebar.collapsed .user-profile span,
       .sidebar.collapsed .search-box,
       .sidebar.collapsed a span:not(.sub-menu-short),
       .sidebar.collapsed .sub-menu-icon {
            display: none;
        }

       .sidebar.collapsed .sub-menu li a .sub-menu-short {
            margin: 0;
            display: inline;
            background: linear-gradient(135deg, rgba(102, 126, 234, 1) 0%, rgba(118, 75, 162, 1) 100%);
            color: #fff;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 15px;
            padding: 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
        }

       .sub-menu-short {
            display: none;
        }

       .sidebar::-webkit-scrollbar {
            width: 0;
        }

       .sidebar .user-profile {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

       .sidebar .user-profile .user-initials {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            border-bottom: 5px solid #694998;
            border-right: 10px solid #fff;
        }

       .sidebar .search-box {
            margin: 10px 10px 10px 0px;
        }

       .sidebar .search-box input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

       .sidebar a {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            color: #333;
            text-decoration: none;
            padding: 8px 10px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

       .sidebar a:hover {
            background-color: #e9f2ff;
        }

       .sidebar a i {
            width: 20px;
            margin-right: 10px;
            color: #666;
        }

       .main-content {
            flex: 1;
            padding: 0px 10px 10px 10px;
            display: flex;
            flex-direction: column;
        }

       .main-content .top-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 20px;
            background: #fff;
        }

       .main-content .top-info span {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

       .main-content .notification {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 230px; /* 增加宽度以适应新按钮 */
        }

       .main-content .notification i,
       .main-content .notification .user-initials,
       .main-content .notification .logout-icon,
       .main-content .notification .collapse-btn,
       .main-content .notification .help-btn,
       .main-content .notification .fullscreen-btn { /* 新增全屏按钮样式 */
            color: #333;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            background-color: #e9f2ff;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

       .main-content .notification i:hover,
       .main-content .notification .user-initials:hover,
       .main-content .notification .logout-icon:hover,
       .main-content .notification .collapse-btn:hover,
       .main-content .notification .help-btn:hover,
       .main-content .notification .fullscreen-btn:hover { /* 新增全屏按钮悬停样式 */
            transform: scale(1.1);
        }

       .main-content iframe {
            flex: 1;
            width: 100%;
            border: none;
        }

       .sidebar .sub-menu {
            list-style-type: none;
            padding-left: 20px;
            display: none;
        }

       .sidebar .sub-menu li {
            margin-bottom: 5px;
        }

       .sidebar .sub-menu li a {
            padding: 5px 10px;
        }

       .sidebar .parent-menu .sub-menu-icon {
            margin-left: auto;
            margin-right: 0;
        }

       .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

       .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 300px;
            border-radius: 10px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            text-align: center;
        }

       .modal-buttons {
            margin-top: 20px;
        }

       .modal-buttons button {
            padding: 10px 20px;
            margin: 0 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

       .modal-buttons button.confirm {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

       .modal-buttons button.cancel {
            background-color: #ccc;
            color: black;
        }

       /* 添加美化 '极数Utils' 的样式 */
       .sidebar .user-profile span {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 22px;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        /* 新增版本信息弹窗样式 */
       .version-modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
        }

       .version-content {
            background-color: #fff;
            margin: 10% auto;
            padding: 20px;
            width: 380px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

       .version-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

       .version-header h3 {
            margin: 0;
            color: #333;
        }

       .close-btn {
            color: #aaa;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }

       .close-btn:hover {
            color: #333;
        }

       .version-info {
            margin-bottom: 15px;
            text-align: left;
        }

       .version-info p {
            margin: 5px 0;
            color: #555;
        }

       .qrcode-container {
            text-align: center;
            margin: 15px 0;
        }

       .qrcode-container img {
            width: 150px;
            height: 150px;
            border: 1px solid #eee;
            padding: 5px;
            background: #fff;
        }

       .follow-text {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }

       .collapse-btn {
            cursor: pointer;
        }

        hr {
        border: none;
        height: 1px;
        background-color: #eee;
      }
      
      /* 全屏样式 */
      .fullscreen {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 9999;
          background: white;
      }
      
      .fullscreen .top-info {
          display: none !important;
      }
      
      .fullscreen-close-btn {
          position: fixed;
          top: 10px;
          right: 10px;
          z-index: 10000;
          background: #667eea;
          color: white;
          border: none;
          border-radius: 50%;
          width: 40px;
          height: 40px;
          font-size: 20px;
          cursor: pointer;
          display: none;
          justify-content: center;
      }

      .fullscreen-close-btn i{
        display: grid;
        align-content: center;
        justify-content: center;
    }
    </style>
</head>

<body>
    <div class="sidebar" id="sidebar">
        <div class="user-profile">
            <div class="user-initials">JS</div>
            <span>JeapSik</span>
        </div>
        <div class="search-box">
            <input type="text" id="search-input" placeholder="搜索菜单">
        </div>
       <a href="#" data-url="#" class="parent-menu" onclick="toggleSubMenu(this)">
            <i class="fa-solid fa-water"></i>
            <span>水印相关</span>
            <i class="fa-solid fa-chevron-down sub-menu-icon"></i>
        </a>
        <ul class="sub-menu">
            <li><a href="#" data-url="tools/id-watermark.html" title="身份证水印"><span class="sub-menu-short">身</span><span>身份证水印</span></a></li>
            <li><a href="#" data-url="tools/diploma-watermark.html" title="毕业证水印"><span class="sub-menu-short">毕</span><span>毕业证水印</span></a></li>
            <li><a href="#" data-url="tools/picture-watermark.html" title="图片水印工具"><span class="sub-menu-short">图</span><span>图片水印工具</span></a></li>
            <li><a href="#" data-url="tools/pdf-watermark-China.html" title="PDF中文水印"><span class="sub-menu-short">中</span><span>PDF中文水印</span></a></li>
            <li><a href="#" data-url="tools/pdf-watermark-english.html" title="PDF英文水印"><span class="sub-menu-short">英</span><span>PDF英文水印</span></a></li>
            <li><a href="#" data-url="tools/pdf-online-signature.html" title="PDF在线签章"><span class="sub-menu-short">在</span><span>PDF在线签章</span></a></li>
        </ul>
        <a href="#" data-url="#" class="parent-menu" onclick="toggleSubMenu(this)">
            <i class="fa-solid fa-calculator"></i>
            <span>计算工具</span>
            <i class="fa-solid fa-chevron-down sub-menu-icon"></i>
        </a>
        <ul class="sub-menu">
            <li><a href="#" data-url="tools/calculator.html" title="计算器"><span class="sub-menu-short">计</span><span>计算器</span></a></li>
            <li><a href="#" data-url="tools/date_countdown.html" title="日期倒计时"><span class="sub-menu-short">日</span><span>日期倒计时</span></a></li>
            <li><a href="#" data-url="tools/monthly-working-days.html" title="月度工作日"><span class="sub-menu-short">月</span><span>月度工作日</span></a></li>
            <li><a href="#" data-url="tools/MD5_encryption_tool.html" title="MD5在线加密"><span class="sub-menu-short">在</span><span>MD5在线加密</span></a></li>
            <li><a href="#" data-url="tools/pre-sales-workload.html" title="售前工作量模型"><span class="sub-menu-short">售</span><span>售前工作量模型</span></a></li>
            <li><a href="#" data-url="tools/rmb-conversion.html" title="人民币大小写转换"><span class="sub-menu-short">人</span><span>人民币大小写转换</span></a></li>
            <li><a href="#" data-url="tools/software-workload-assessment-model.html" title="软件工作量预估模型"><span class="sub-menu-short">软</span><span>软件工作量预估模型</span></a></li>
            <li><a href="#" data-url="tools/price-quoted-bullseye.html" title="靶心价计算模型"><span class="sub-menu-short">靶</span><span>靶心价计算模型</span></a></li>
            <li><a href="#" data-url="tools/price-quoted-lower.html" title="最低价计算模型"><span class="sub-menu-short">最</span><span>最低价计算模型</span></a></li>
            <li><a href="#" data-url="tools/price-quoted-average.html" title="合理均价计算模型"><span class="sub-menu-short">合</span><span>合理均价计算模型</span></a></li>
            <li><a href="#" data-url="tools/price-quoted-direct.html" title="直接均价计算模型"><span class="sub-menu-short">直</span><span>直接均价计算模型</span></a></li>
            <li><a href="#" data-url="tools/price-quoted-reasonable.html" title="合理低价计算模型"><span class="sub-menu-short">合</span><span>合理低价计算模型</span></a></li>
        </ul>
        <a href="#" data-url="#" class="parent-menu" onclick="toggleSubMenu(this)">
            <i class="fa-solid fa-magnifying-glass-chart"></i>
            <span>信息解析</span>
            <i class="fa-solid fa-chevron-down sub-menu-icon"></i>
        </a>
        <ul class="sub-menu">
            <li><a href="#" data-url="tools/id-information.html" title="身份信息解析"><span class="sub-menu-short">身</span><span>身份信息解析</span></a></li>
            <li><a href="#" data-url="tools/cosmic-information.html" title="COSMIC功能点拆分"><span class="sub-menu-short">功</span><span>COSMIC功能点拆分</span></a></li>
        </ul>
        <a href="#" data-url="#" class="parent-menu" onclick="toggleSubMenu(this)">
            <i class="fa-solid fa-file"></i>
            <span>文档模版</span>
            <i class="fa-solid fa-chevron-down sub-menu-icon"></i>
        </a>
        <ul class="sub-menu">
            <li><a href="#" data-url="tools/signin-receipt.html" title="签收单模版"><span class="sub-menu-short">签</span><span>签收单模版</span></a></li>
            <li><a href="#" data-url="tools/resume-template.html" title="个人简历模版"><span class="sub-menu-short">个</span><span>个人简历模版</span></a></li>
            <li><a href="#" data-url="tools/business-card-template.html" title="个人名片模版"><span class="sub-menu-short">个</span><span>个人名片模版</span></a></li>
            <li><a href="#" data-url="tools/employment-labor-contract.html" title="劳动合同模版"><span class="sub-menu-short">劳</span><span>劳动合同模版</span></a></li>
            <li><a href="#" data-url="tools/income-proof-template.html" title="收入证明模版"><span class="sub-menu-short">收</span><span>收入证明模版</span></a></li>
            <li><a href="#" data-url="tools/employment-certificate.html" title="在职证明模版"><span class="sub-menu-short">在</span><span>在职证明模版</span></a></li>
            <li><a href="#" data-url="tools/employee-onboarding.html" title="入职流程表模版"><span class="sub-menu-short">入</span><span>入职流程表模版</span></a></li>
            <li><a href="#" data-url="tools/paper-template.html" title="通用试卷模版"><span class="sub-menu-short">通</span><span>通用试卷模版</span></a></li>
            <li><a href="#" data-url="tools/sign-in-template.html" title="签到表模版"><span class="sub-menu-short">签</span><span>签到表模版</span></a></li>
            <li><a href="#" data-url="tools/monthly-attendance-template.html" title="月度考勤模版"><span class="sub-menu-short">月</span><span>月度考勤模版</span></a></li>
            <li><a href="#" data-url="tools/monthly-attendance-records.html" title="考勤记录模版"><span class="sub-menu-short">考</span><span>考勤记录模版</span></a></li>
            <li><a href="#" data-url="tools/handwritten-check-in-tool.html" title="手写签到工具"><span class="sub-menu-short">手</span><span>手写签到工具</span></a></li>
            <li><a href="#" data-url="tools/employment-separation-certificate.html" title="离职证明模版"><span class="sub-menu-short">离</span><span>离职证明模版</span></a></li>
            <li><a href="#" data-url="tools/meeting-minutes.html" title="会议纪要模版"><span class="sub-menu-short">会</span><span>会议纪要模版</span></a></li>
            <li><a href="#" data-url="tools/employee-confidentiality-agreement.html" title="员工保密协议模版"><span class="sub-menu-short">员</span><span>员工保密协议模版</span></a></li>
            <li><a href="#" data-url="tools/project_confidentiality_agreement.html" title="项目保密协议模版"><span class="sub-menu-short">项</span><span>项目保密协议模版</span></a></li>
            <li><a href="#" data-url="tools/data-security-agreement.html" title="数据安全保密协议"><span class="sub-menu-short">数</span><span>数据安全保密协议</span></a></li>
            <li><a href="#" data-url="tools/software-handover-checklist-template.html" title="软件交接清单模版"><span class="sub-menu-short">软</span><span>软件交接清单模版</span></a></li>
            <li><a href="#" data-url="tools/enterprise-template.html" title="企业红头文件模版"><span class="sub-menu-short">企</span><span>企业红头文件模版</span></a></li>
            <li><a href="#" data-url="tools/enterprise-authorization.html" title="企业授权书模版"><span class="sub-menu-short">企</span><span>企业授权书模版</span></a></li>
            <li><a href="#" data-url="tools/corporate-authorization.html" title="法人授权书模版"><span class="sub-menu-short">法</span><span>法人授权书模版</span></a></li>
            <li><a href="#" data-url="tools/personal-authorization.html" title="个人授权书模版"><span class="sub-menu-short">个</span><span>个人授权书模版</span></a></li>
            <li><a href="#" data-url="tools/authorization-certificate.html" title="授权证书模版"><span class="sub-menu-short">授</span><span>授权证书模版</span></a></li>
            <li><a href="#" data-url="tools/work-monthly-report.html" title="工作考核模版"><span class="sub-menu-short">工</span><span>工作考核模版</span></a></li>
            <li><a href="#" data-url="tools/honor-certificate.html" title="荣誉证书模版"><span class="sub-menu-short">荣</span><span>荣誉证书模版</span></a></li>
            <li><a href="#" data-url="tools/personal-confidentiality-project.html" title="保密承诺书（项目）"><span class="sub-menu-short">保</span><span>保密承诺书（项目）</span></a></li>
            <li><a href="#" data-url="tools/personal-confidentiality-letter.html" title="保密承诺书（指派）"><span class="sub-menu-short">保</span><span>保密承诺书（指派）</span></a></li>
            <li><a href="#" data-url="tools/text-editing-tool.html" title="文本编辑工具"><span class="sub-menu-short">文</span><span>文本编辑工具</span></a></li>
            <li><a href="#" data-url="tools/collection-receipt-template.html" title="收款收据模版"><span class="sub-menu-short">收</span><span>收款收据模版</span></a></li>
            <li><a href="#" data-url="tools/bill-paste-sheet.html" title="票据粘贴单"><span class="sub-menu-short">票</span><span>票据粘贴单</span></a></li>
            <li><a href="#" data-url="tools/invoice-paste-sheet.html" title="发票粘贴单"><span class="sub-menu-short">发</span><span>发票粘贴单</span></a></li>
            <li><a href="#" data-url="tools/schedule-payments.html" title="付款计划表"><span class="sub-menu-short">付</span><span>付款计划表模版</span></a></li>
            <li><a href="#" data-url="tools/check-acceptt-template.html" title="验收证明模版"><span class="sub-menu-short">验</span><span>验收证明模版</span></a></li>
            <li><a href="#" data-url="tools/performance_certificate.html" title="业绩证明模版"><span class="sub-menu-short">业</span><span>业绩证明模版</span></a></li>
            <li><a href="#" data-url="tools/project-acceptance-form.html" title="项目验收单模版"><span class="sub-menu-short">项</span><span>项目验收单模版</span></a></li>
            <li><a href="#" data-url="tools/paper-grading-exam.html" title="定级试卷模版"><span class="sub-menu-short">定</span><span>定级试卷模版</span></a></li>
            <li><a href="#" data-url="tools/attendance-exception-explanation.html" title="考勤异常说明"><span class="sub-menu-short">考</span><span>考勤异常说明</span></a></li>
            <li><a href="#" data-url="tools/purchase_list.html" title="物品采购清单"><span class="sub-menu-short">物</span><span>物品采购清单</span></a></li>
        </ul>
        <a href="#" data-url="#" class="parent-menu" onclick="toggleSubMenu(this)">
            <i class="fa-solid fa-sitemap"></i>
            <span>架构图表</span>
            <i class="fa-solid fa-chevron-down sub-menu-icon"></i>
        </a>
        <ul class="sub-menu">
            <li><a href="#" data-url="tools/general-architecture-diagram.html" title="通用架构图"><span class="sub-menu-short">通</span><span>通用架构图</span></a></li>
            <li><a href="#" data-url="tools/business-architecture-diagram.html" title="业务架构图"><span class="sub-menu-short">业</span><span>业务架构图</span></a></li>
            <li><a href="#" data-url="tools/architecture-diagram-tool.html" title="自定义架构图"><span class="sub-menu-short">业</span><span>自定义架构图</span></a></li>
            <li><a href="#" data-url="tools/process-diagram-desig.html" title="流程图设计"><span class="sub-menu-short">流</span><span>流程图设计</span></a></li>
            <li><a href="#" data-url="tools/echarts-design-tool.html" title="图表生成工具"><span class="sub-menu-short">图</span><span>图表生成工具</span></a></li>
            <li><a href="#" data-url="tools/appointment-template.html" title="聘书模版工具"><span class="sub-menu-short">聘</span><span>聘书模版工具</span></a></li>
            <li><a href="#" data-url="tools/work-badge-design-tool.html" title="工作牌设计工具"><span class="sub-menu-short">工</span><span>工作牌设计工具</span></a></li>
        </ul>
        <a href="#" data-url="#" class="parent-menu" onclick="toggleSubMenu(this)">
            <i class="fa-solid fa-pen"></i>
            <span>绘图工具</span>
            <i class="fa-solid fa-chevron-down sub-menu-icon"></i>
        </a>
        <ul class="sub-menu">
            <li><a href="#" data-url="tools/artistic-graffiti.html" title="艺术绘图工具"><span class="sub-menu-short">艺</span><span>艺术绘图工具</span></a></li>
            <li><a href="#" data-url="tools/retro-ink-painting.html" title="复古水墨画工具"><span class="sub-menu-short">复</span><span>复古水墨画工具</span></a></li>
            <li><a href="#" data-url="tools/company-storefront-template.html" title="公司门头模版工具"><span class="sub-menu-short">公</span><span>公司门头模版工具</span></a></li>
            <li><a href="#" data-url="tools/company-business-card.html" title="企业名片模版工具"><span class="sub-menu-short">企</span><span>企业名片模版工具</span></a></li>
        </ul>
        <a href="#" data-url="#" class="parent-menu" onclick="toggleSubMenu(this)">
            <i class="fa-solid fa-qrcode"></i>
            <span>二维码类</span>
            <i class="fa-solid fa-chevron-down sub-menu-icon"></i>
        </a>
        <ul class="sub-menu">
            <li><a href="#" data-url="tools/qrcode-generation.html" title="链接二维码"><span class="sub-menu-short">链</span><span>链接二维码</span></a></li>
        </ul>
        <a href="#" data-url="#" class="parent-menu" onclick="toggleSubMenu(this)">
            <i class="fa-solid fa-signature"></i>
            <span>签章工具</span>
            <i class="fa-solid fa-chevron-down sub-menu-icon"></i>
        </a>
        <ul class="sub-menu">
            <li><a href="#" data-url="tools/company-signature.html" title="公司电子签章"><span class="sub-menu-short">公</span><span>公司电子签章</span></a></li>
            <li><a href="#" data-url="tools/personal-signature.html" title="个人电子签章"><span class="sub-menu-short">个</span><span>个人电子签章</span></a></li>
            <li><a href="#" data-url="tools/handwritten-signature-creation.html" title="手写签名制作工具"><span class="sub-menu-short">手</span><span>手写签名制作工具</span></a></li>
            <li><a href="#" data-url="tools/scanning-signature-tool.html" title="图片签章工具"><span class="sub-menu-short">图</span><span>图片签章工具</span></a></li>
            <li><a href="#" data-url="tools/picture-signature-tool.html" title="图片签字工具"><span class="sub-menu-short">图</span><span>图片签字工具</span></a></li>
        </ul>
        <a href="#" data-url="#" class="parent-menu" onclick="toggleSubMenu(this)">
            <i class="fa-solid fa-file-image"></i>
            <span>图片处理</span>
            <i class="fa-solid fa-chevron-down sub-menu-icon"></i>
        </a>
        <ul class="sub-menu">
            <li><a href="#" data-url="tools/photo-crop-tool.html" title="照片裁剪工具"><span class="sub-menu-short">照</span><span>照片裁剪工具</span></a></li>
            <li><a href="#" data-url="tools/image-crop-exportPDF.html" title="图片裁剪导出PDF"><span class="sub-menu-short">图</span><span>图片裁剪导出PDF</span></a></li>
            <li><a href="#" data-url="tools/panoramic-view-tool.html" title="全景图查看工具"><span class="sub-menu-short">全</span><span>全景图查看工具</span></a></li>
            <li><a href="#" data-url="tools/album-automatic-player.html" title="相册自动播放器"><span class="sub-menu-short">相</span><span>相册自动播放器</span></a></li>
        </ul>
        <a href="#" data-url="#" class="parent-menu" onclick="toggleSubMenu(this)">
            <i class="fa-solid fa-file-code"></i>
            <span>转换工具</span>
            <i class="fa-solid fa-chevron-down sub-menu-icon"></i>
        </a>
        <ul class="sub-menu">
            <li><a href="#" data-url="tools/favicon-conversion-tool.html" title="Favicon转换工具"><span class="sub-menu-short">转</span><span>Favicon转换工具</span></a></li>
            <li><a href="#" data-url="tools/online-answering-terminal.html" title="在线考试终端"><span class="sub-menu-short">在</span><span>在线考试终端</span></a></li>
            <li><a href="#" data-url="tools/video-player.html" title="视频播放终端"><span class="sub-menu-short">视</span><span>视频播放终端</span></a></li>
            <li><a href="#" data-url="tools/streaming-player.html" title="流媒体播放终端"><span class="sub-menu-short">流</span><span>流媒体播放终端</span></a></li>
            <li><a href="#" data-url="tools/imag-Base64-conversion.html" title="图片Base64转换工具"><span class="sub-menu-short">图</span><span>图片Base64转换工具</span></a></li>
        </ul>
    </div>
    <div class="main-content">
        <div class="top-info">
            <span title="以匠人之心精研运化，怀深厚期望宿命归来">匠心独运·硕望宿归</span>
            <div class="notification">
                <div class="collapse-btn" onclick="toggleSidebar()"><i class="fa-solid fa-bars" title="收起/展开菜单栏"></i></div>
                <div class="help-btn" onclick="openHelpPage()"><i class="fa-solid fa-question" title="帮助中心"></i></div>
                <div class="fullscreen-btn" onclick="toggleFullscreen()"><i class="fa-solid fa-expand" title="全屏显示"></i></div>
                <i class="fa-solid fa-bell" onclick="openVersionModal()" title="系统消息"></i>
                <i class="fa-solid fa-right-from-bracket logout-icon" onclick="openLogoutModal()" title="退出登录"></i>
            </div>
        </div>
        <iframe id="content-frame" src="home.html"></iframe>
    </div>
    
    <!-- 全屏关闭按钮 -->
    <button class="fullscreen-close-btn" onclick="toggleFullscreen()"><i class="fa-solid fa-compress"></i></button>

    <!-- 退出登录弹窗 -->
    <div id="logout-modal" class="modal">
        <div class="modal-content">
            <p>你确定要退出登录吗？</p>
            <div class="modal-buttons">
                <button class="confirm" onclick="confirmLogout()">确认</button>
                <button class="cancel" onclick="closeLogoutModal()">取消</button>
            </div>
        </div>
    </div>

    <!-- 版本信息弹窗 -->
    <div id="version-modal" class="version-modal">
        <div class="version-content">
            <div class="version-header">
                <h3>JeapSik版本信息</h3>
                <span class="close-btn" onclick="closeVersionModal()">&times;</span>
            </div>
            <div class="version-info">
                <p><strong>系统名称：</strong> JeapSik</p>
                <p><strong>当前版本：</strong> v1.2.2</p>
                <p><strong>更新日期：</strong> 2024-10-15</p>
                <p><strong>工具统计：</strong> <span id="sub-menu-count"></span></p>
                <p><strong>登录账号：</strong> <span id="display-username"></span></p>
                <p><strong>登录时间：</strong> <span id="login-time"></span></p>
            </div>
            <div class="qrcode-container">
                <img src="img/WeChat.jpg" alt="公众号二维码">
                <p class="follow-text">扫描二维码关注公众号，获取最新动态</p>
            </div>
            <hr>
            <div class="version-info">
                <p>如有工具集成建议，请投稿： <strong>987808567@qq.com</strong></p>
            </div>
        </div>
    </div>

    <script>
        // 显示登录用户名和登录时间
        function displayUserInfo() {
            const username = localStorage.getItem('jsUserName') || '用户';
            document.getElementById('display-username').textContent = username;

            const now = new Date(localStorage.getItem('loginTime'));
            const loginTime = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
            document.getElementById('login-time').textContent = loginTime;
        }

        // 打开版本信息弹窗
        function openVersionModal() {
            displayUserInfo();
            document.getElementById('version-modal').style.display = 'block';
        }

        // 关闭版本信息弹窗
        function closeVersionModal() {
            document.getElementById('version-modal').style.display = 'none';
        }

        // 点击弹窗外部关闭弹窗
        window.onclick = function (event) {
            const versionModal = document.getElementById('version-modal');
            if (event.target == versionModal) {
                versionModal.style.display = 'none';
            }

            const logoutModal = document.getElementById('logout-modal');
            if (event.target == logoutModal) {
                logoutModal.style.display = 'none';
            }
        }

        const correctUsername = '32981a13284db7a021131df49e6cd203';
        const correctPassword = '91ac9cbd813936f08de5abb74c8e010e';
        const usernameMd5 = localStorage.getItem('usernameMd5');
        const passwordMd5 = localStorage.getItem('passwordMd5');
        if (usernameMd5 === correctUsername && passwordMd5 === correctPassword) {

        } else {
            window.location.href = 'login.html';
        }
        const searchInput = document.getElementById('search-input');
        // 选择所有侧边栏链接，包括二级菜单
        const menuItems = document.querySelectorAll('.sidebar a');
        searchInput.addEventListener('input', function () {
            const searchText = this.value.toLowerCase();
            menuItems.forEach(item => {
                const menuText = item.textContent.toLowerCase();
                if (menuText.includes(searchText)) {
                    item.style.display = 'flex';
                    // 显示父菜单
                    const parentMenu = item.closest('.sub-menu')?.previousElementSibling;
                    if (parentMenu) {
                        parentMenu.style.display = 'flex';
                        // 展开父菜单
                        const subMenu = parentMenu.nextElementSibling;
                        subMenu.style.display = 'block';
                        const icon = parentMenu.querySelector('.sub-menu-icon');
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-up');
                    }
                } else {
                    item.style.display = 'none';
                    // 检查父菜单的所有子菜单是否都隐藏，如果是则隐藏父菜单
                    const parentMenu = item.closest('.sub-menu')?.previousElementSibling;
                    if (parentMenu) {
                        const subMenu = parentMenu.nextElementSibling;
                        const allHidden = Array.from(subMenu.children).every(child => {
                            return child.querySelector('a').style.display === 'none';
                        });
                        if (allHidden) {
                            parentMenu.style.display = 'none';
                            subMenu.style.display = 'none';
                            const icon = parentMenu.querySelector('.sub-menu-icon');
                            icon.classList.remove('fa-chevron-up');
                            icon.classList.add('fa-chevron-down');
                        }
                    }
                }
            });
        });
        menuItems.forEach(item => {
            item.addEventListener('click', function (e) {
                e.preventDefault();
                const hasSubMenu = item.classList.contains('parent-menu');
                if (!hasSubMenu) {
                    const url = this.getAttribute('data-url');
                    const iframe = document.getElementById('content-frame');
                    iframe.src = url;
                }
            });
        });

        function toggleSubMenu(menu) {
            const subMenu = menu.nextElementSibling;
            const icon = menu.querySelector('.sub-menu-icon');
            if (subMenu.style.display === 'none' || subMenu.style.display === '') {
                subMenu.style.display = 'block';
                icon.classList.remove('fa-chevron-down');
                icon.classList.add('fa-chevron-up');
            } else {
                subMenu.style.display = 'none';
                icon.classList.remove('fa-chevron-up');
                icon.classList.add('fa-chevron-down');
            }
        }

        function openLogoutModal() {
            const modal = document.getElementById('logout-modal');
            modal.style.display = 'block';
        }

        function closeLogoutModal() {
            const modal = document.getElementById('logout-modal');
            modal.style.display = 'none';
        }

        function confirmLogout() {
            localStorage.removeItem('usernameMd5');
            localStorage.removeItem('passwordMd5');
            window.location.href = 'login.html';
        }

        let isExpirationModalOpen = false;

        function checkTime() {
            const currentTime = new Date();
            const loginTime = new Date(localStorage.getItem('loginTime'));
            const timeDifference = currentTime - loginTime;
            const twoHoursInMilliseconds = 2 * 60 * 60 * 1000;//登录时间不超过2小时
            const twentyFoursInMilliseconds = 12 * 60 * 60 * 1000;//登录时间不超过12小时
            if(timeDifference > twentyFoursInMilliseconds){
                confirmLogout();
                return;
            }

            if (timeDifference > twoHoursInMilliseconds &&!isExpirationModalOpen) {
                // 显示过期提示模态框
                showExpirationModal();
                isExpirationModalOpen = true;
            }
        }

        // 新增过期提示模态框
        function showExpirationModal() {
            const modal = document.createElement('div');
            modal.className = 'modal';
            modal.id = 'expiration-modal';
            modal.innerHTML = `
                <div class="modal-content">
                    <p>登录状态即将过期，是否重新登录？</p>
                    <div class="modal-buttons">
                        <button class="confirm" onclick="renewLogin()">是</button>
                        <button class="cancel" onclick="extendSession()">否</button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);
            modal.style.display = 'block';
        }

        function renewLogin() {
            // 跳转到登录页面
            window.location.href = 'login.html';
        }

        function extendSession() {
            // 更新登录时间为当前时间
            const now = new Date();
            localStorage.setItem('loginTime', now);
            // 关闭模态框
            const modal = document.getElementById('expiration-modal');
            if (modal) {
                modal.style.display = 'none';
                modal.remove();
                isExpirationModalOpen = false;
            }
        }

        // 点击弹窗外部关闭弹窗（更新原有函数）
        window.onclick = function (event) {
            const versionModal = document.getElementById('version-modal');
            if (event.target == versionModal) {
                versionModal.style.display = 'none';
            }

            const logoutModal = document.getElementById('logout-modal');
            if (event.target == logoutModal) {
                logoutModal.style.display = 'none';
            }

            const expirationModal = document.getElementById('expiration-modal');
            if (event.target == expirationModal) {
                expirationModal.style.display = 'none';
                expirationModal.remove();
                isExpirationModalOpen = false;
            }
        }

        // 每隔一段时间检查一次
        setInterval(checkTime, 60 * 1000); // 每分钟检查一次

        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('collapsed');
        }

        function openHelpPage() {
            window.open('help.html', '_blank'); // 点击帮助按钮打开新窗口跳转到帮助页面
        }
        
        // 全屏功能
        function toggleFullscreen() {
            const mainContent = document.querySelector('.main-content');
            const fullscreenBtn = document.querySelector('.fullscreen-btn i');
            const closeBtn = document.querySelector('.fullscreen-close-btn');
            
            if (mainContent.classList.contains('fullscreen')) {
                // 退出全屏
                mainContent.classList.remove('fullscreen');
                fullscreenBtn.classList.remove('fa-compress');
                fullscreenBtn.classList.add('fa-expand');
                closeBtn.style.display = 'none';
                document.title = 'JeapSik-全场景工具集';
            } else {
                // 进入全屏
                mainContent.classList.add('fullscreen');
                fullscreenBtn.classList.remove('fa-expand');
                fullscreenBtn.classList.add('fa-compress');
                closeBtn.style.display = 'flex';
                document.title = '全屏模式 | JeapSik';
            }
        }
        
        // 统计二级菜单数量并显示
        function countSubMenus() {
            const subMenuItems = document.querySelectorAll('.sub-menu li');
            const subMenuCountElement = document.getElementById('sub-menu-count');
            subMenuCountElement.textContent = `当前工具集${subMenuItems.length}个`;
            checkTime();
        }

        // 页面加载完成后执行统计
        window.addEventListener('load', countSubMenus);
    </script>
</body>

</html>